<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import {
  useAddDynamic
} from "@/hooks/write-hook"

const store = useStore();
const user = store.state.user;
const message = ref("");
const isLoading = ref(false);
const show = ref(false);

const fileList = ref([]);

const afterRead = (file, fieldName) => {
  show.value = false;
};

const beforeRead = () => {
  show.value = true;
  return true;
};

const submit = () => {
   show.value = true;
   useAddDynamic(user,{
       dynamic_content:message.value,
       dynamic_imgs:fileList.value
   });
   show.value = false;
};
</script>

<template>
  <div class="write_dynamic">
    <van-overlay :show="show">
      <div class="wrapper" >
           <van-loading size="24px"  color="#FFFFFF" >处理中...</van-loading>
      </div>
    </van-overlay>

    <van-cell-group inset>
      <van-field
        class="field"
        v-model="message"
        rows="4"
        autosize
        autofocus
        colon
        name="conent"
        label="发布说说"
        type="textarea"
        placeholder="请输入..."
        show-word-limit
      />
    </van-cell-group>
    <van-row>
      <van-col span="24" style="text-align: right; padding: 0 3px">
        <van-uploader
          :before-read="beforeRead"
          name="file"
          max-count="9"
          upload-text="支持多选 9张"
          multiple
          accept="image/*"
          v-model="fileList"
          :after-read="afterRead"
        />
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24" style="text-align: right; padding: 0 10px">
        <van-button
          @click="submit"
          type="primary"
          size="large"
          :loading="isLoading"
          loading-type="spinner"
          loading-text="发布中..."
          >发表</van-button
        >
      </van-col>
    </van-row>
  </div>
</template>

<style lang="scss">
.field .van-field__label {
  display: none;
}

.van-cell-group--inset {
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
